<template>
  <div>
    <h1>App</h1>
    <ChildrenVue :num="45"></ChildrenVue>
    <SonVue>
      <!-- 简写写法#替代solt={} 对象为内部传入的所有数值的对象,结构出来 -->
      <!-- 使用简写时就不能使用scop接收数据 -->
      <template #size="{ sizes }">
        <!-- 作用域插槽 -->
        <h1>这里是插槽{{ sizes }}</h1>
      </template>
      <!-- 非简写模式,不能和上面混用 -->
      <!--  -->
      <template scope="scope" slot="zip">
        <h1>这里是插槽zip __scope :{{ scope }}</h1>
      </template>
    </SonVue>
  </div>
</template>

<script>
import ChildrenVue from './components/children.vue'
import SonVue from './components/Son.vue'

export default {
  name: 'App',
  data() {
    return {
      con: {
        // provide本身是没有
        continues: 1,
        size: 180,
      },
    }
  },
  components: {
    ChildrenVue,
    SonVue,
  },
  methods: {
    changeCon(size) {
      console.log(size)
      console.log(this)
      this.con.size = size
    },
  },
  // // 子孙传递的方法,类似于react中的usecontext
  // provide: {
  //   // proveide中的数据可以在任意子组件中使用rej
  //   size: '180',
  //   // 但在函数中使用是无法使用this指向当前vm实例无法获取到数据
  //   continues: this.continues,
  // },
  // 还提供了一种函数写法
  // 书写方式类似于data
  provide() {
    return {
      // 可以访问到this
      // 直接使用数据传递是没有响应式的,如果需要使用响应式数据就需要传递一个对象,或者直接将this传递过去这样就不会有响应式问题
      con: this.con,
      changeCon: this.changeCon,
    }
  },
}
</script>

<style></style>
